<template>

<div class="manage">
  <el-row :gutter="10" style="align-items: center;">
  <el-col :span="9">
    <div class="common-table"  style="width: 100%" height="100% " margin-top="10%" >
      <!-- 用户数据Table -->
      <el-table :data="tableData" stripe >
        <el-table-column prop="sername" label="名称">
        </el-table-column>
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit2(scope.row)">刷新</el-button>
          </template>
        </el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit1(scope.row)">识别</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="pass(scope.row)">通过</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="nopass(scope.row)">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pager">
        <el-pagination
            :page-size="10"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
  </el-col>

  <el-col :span="15">
<span> 识别结果,请稍等;地址:{{videoUrl2}}</span>
    <LivePlayer  :videoUrl ="videoUrl2" style="margin-top: 30px">

    </LivePlayer>
<!--    <HLSPlay style="margin: auto" ref="hlsplayRef" :src="videoUrl2" :cover_url="''"></HLSPlay>-->
  </el-col>
  </el-row>
</div>



</template>

<script>


import {checkno, checkok, getVlist, idfyVideo,checklist } from "@/api";
import LivePlayer from '@liveqing/liveplayer'
import HLSPlay from "@/components/HLSPlay.vue";
export default {
components: {
  HLSPlay,
  // eslint-disable-next-line vue/no-unused-components
  LivePlayer
},
  data () {
    return {
      videoUrl2:'',
      form: {
        id: '',
        name: '',
        addr: '',
        num: '',
        is: ''
      },
      tableData: [],
      pageData: {
        pageNum: 1,
        pageSize:11,
      },
      total: 0,
    }
  },

  methods : {
    pass(row){
      checkok({params:{id:row.id}}).then(res=>{
        if(res.data.code==200){
          this.$message({
                message: '审核成功',
                type: 'success'
              }
          );
          this.getList()
        }else{
          this.$message({
            message: '审核失败',
            type: 'error'
          });
        }
      })

    },
    nopass(row){
      checkno({params:{id:row.id}}).then(res=>{
        if(res.data.code==200){
          this.videoUrl2=''
          this.$message({
                message: '审核成功',
                type: 'success'
              }

          );
          this.getList()
        }else{
          this.$message({
            message: '审核失败',
            type: 'error'
          });
        }
      })
    },
    handleEdit1(row) {
      // console.log(this.videoUrl)
      this.videoUrl2=''
      idfyVideo({params:{id:row.id}})
        this.videoUrl2 = 'http://localhost:8081/hls/streamai'+ row.id+".m3u8";

    },
    handleEdit2(row){
      this.videoUrl2=''
      this.videoUrl2 = 'http://localhost:8081/hls/streamai'+ row.id+".m3u8";
    },
    currentChange(val) {
      this.pageData.pageNum=val;
      this.getList()
    },
    getList() {
      // 由接口文档知传入一个对象:要返回的是当前页面数据和搜索到的数据的交集
      checklist({ params: { ...this.pageData }  }).then((data) => {
        this.tableData = data.data.data.list
        //  console.log( data.data.data.list)
        this.total = data.data.data.total|| 0
        // console.log(this.total)
      })
    },
  },
  mounted: function () {
    this.getList()

  },

}
</script>

<style>
.manage {
  height: 100%;

}
.common-table {
  height: 90%;
  position: relative;
  .full-width-table {
    width: 100%;
    height: 100%;
  }
}

</style>